<template>
	<view>
		<view class="card">
			<view class="icons">
				<image src="/static/icons/re_card_icon@2x.png" class="hb" mode=""></image>
				<text class="txt">红包余额</text>
				<image src="/static/icons/wenhao@2x.png" @click="toCashDesc()" class="tip"></image>
			</view>

			<view class="num">
				￥{{num}}
			</view>
			<view class="yuan">
				(元)
			</view>

			<view class="tixian" @click="toCash">
				去提现 >>
			</view>
		</view>
		<!-- 嗨，记个流水账 -->
		<view class="record-list">
			<view class="item" v-for="(item,index) in recordList" :key="index">
				<view class="pic">
					<image class="type-pic" src="/static/icons/get_re_icon@2x.png" mode="" v-if="item.type=='2'">
					</image>
					<image class="type-pic" src="/static/icons/purchase_subtract_icon@2x.png" v-else></image>
					<!-- <image src="/static/icons/purchase_subtract_icon@2x.png" mode=""></image> -->
				</view>
				<view class="desc">
					<view class="title">
						{{item.title}}
					</view>
					<view class="time">
						{{item.createDate}}
					</view>
				</view>
				<view class="amount">
					<view class="count">
						{{item.dzType=='1'? '+'+item.amount.toFixed(2):'-'+item.amount.toFixed(2)}}
					</view>
					<view class="total">
						{{item.totalAmount.toFixed(2)}}
					</view>
				</view>
			</view>
		</view>

		<!-- 提现 遮罩-->
		<view class="mask" v-if="showCashMask">
			<view class="dialog">
				<view class="title">
					提现金额
				</view>
				<input type="digit" class="ipt" focus @input="getIptValue" placeholder="请输入提现金额" :value="getCashNum" />

				<view class="balance_tip">
					<view class="now_balance">
						当前红包余额{{num}}元
					</view>
					<view class="all_to_cash" @click="allToCash">
						全部提现
					</view>
				</view>

				<view class="btns">
					<view class="cancle" @click="cancle">
						取消
					</view>
					<view class="pay" @click="sureGetCash">
						确认
					</view>
				</view>
			</view>
		</view>

		<!-- 提现说明遮罩 -->
		<view class="mask" v-if="cashTipMask" @click="cashTipMask=false">
			<view class="cash-tip-mask">
				<rich-text :nodes="desc"></rich-text>
			</view>
		</view>

		<!-- 等级不足时，显示遮罩 -->
		<view class="mask" v-if="showTips">
			<view class="need-level">
				<view class="cant">
					等级不足，无法提现！
				</view>
				<view class="sure-btn" @click="showTips=false">
					确认
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				num: 0,
				offset: 1,
				recordList: [],
				showTips: false, // 等级不足对话框
				showCashMask: false, // 提现对话框
				cashTipMask: false, // 提现说明对话框
				getCashNum: null, // 提现金额
				desc: ''
			};
		},
		onLoad(option) {
			// this.num = option.num
			this.getHbAmountRecord()
		},
		async onReachBottom() {
			this.offset++
			const {
				data: res
			} = await uni.$http.post('/user/getHbAmountRecord', {
				"userId": this.userInfo._id,
				"offset": this.offset,
				"limit": 10
			})
			console.log(res.data.list)
			this.recordList.push(...res.data.list)
			if (res.data.list.length < 1) {
				uni.$showMsg('到底了~')
			}
		},
		methods: {
			// 全部提现
			allToCash() {
				this.getCashNum = this.formatDecimal(this.num,2)
			},
			// 获取提现说明文字
			async toCashDesc() {
				this.cashTipMask = true
				const {
					data: res
				} = await uni.$http.post('/dictionary/getConfig', {
					code: 'HB_SM'
				})
				console.log(res)
				if (res.msg == '成功') {
					this.desc = res.data
				}
			},
			// 取消提现
			cancle() {
				this.showCashMask = false
				this.getCashNum = null
			},
			// 确认提现
			async sureGetCash() {
				if (this.getCashNum > 0) {
					const {
						data: res
					} = await uni.$http.post('/user/cashHb', {
						userId: this.userInfo._id,
						amount: this.getCashNum
					})
					if (res.msg == '等级不足,无法提现') {
						this.showTips = true
						this.showCashMask = false
						this.getCashNum = null
					}
					console.log(res)
					if (res.msg == '成功') {
						uni.$showMsg('提现成功!')
						this.showCashMask = false
						this.getCashNum = null
						this.getHbAmountRecord()
					} else if (res.msg == '提现金额输入有误') {
						uni.$showMsg('输入金额超出红包额度!')
					}
				}
			},
			// 红包提现
			toCash() {
				this.showCashMask = true
			},
			// 获取流水账
			async getHbAmountRecord() {
				const {
					data: res
				} = await uni.$http.post('/user/getHbAmountRecord', {
					"userId": this.userInfo._id,
					"offset": this.offset,
					"limit": 10
				})
				console.log(res.data.list)
				this.recordList = res.data.list
				if (res.data.list.length) {
					this.num = res.data.list[0].totalAmount
					this.num=this.formatDecimal(this.num,2)
					this.userInfo.hb = res.data.list[0].totalAmount
				}
			},
			// 保留两位小数
			formatDecimal(num, decimal) {
				num = num.toString()
				let index = num.indexOf('.')
				if (index !== -1) {
					num = num.substring(0, decimal + index + 1)
				} else {
					num = num.substring(0)
				}
				return parseFloat(num).toFixed(decimal)
			},
			// 获取提现金额
			getIptValue(e) {
				// this.rechargeNum = e.detail
				// 事件触发以后，清除上一次的定时器
				clearTimeout(this.timerId)
				// 重新启动一个定时器获取用户输入的最后一个关键字
				this.timerId = setTimeout(() => {
					// this.rechargeNum = e.detail.value.trim()
					this.getCashNum = e.detail.value.trim()
					// console.log(+e.detail.value)
				}, 500)
			},
		},
		computed: {
			...mapState('m_user', ['userInfo'])
		},
	}
</script>

<style lang="scss">
	.cash-tip-mask {
		width: 620rpx;
		background: #FFFFFF;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 20px;

		font-size: 28rpx;
		font-weight: 500;
		color: #222222;
		line-height: 48rpx;
		position: absolute;
		left: 50%;
		top: 40%;
		transform: translate(-50%, -50%);
	}

	.hb {
		width: 36rpx;
		height: 40rpx;
		vertical-align: middle;
		margin-right: 20rpx;
	}

	.tip {
		width: 35rpx;
		height: 34rpx;
		z-index: 999;
		position: absolute;
		right: 0;
		top: 0;
	}

	page {
		padding: 55rpx 24rpx;
		box-sizing: border-box;

		.card {
			width: 702rpx;
			height: 316rpx;
			background: linear-gradient(-42deg, #DA441B, #F56942);
			// background: linear-gradient(42deg, #EF1B18 0%, #F2672A 98%);
			border-radius: 20rpx;
			padding: 0 26rpx;
			padding-top: 26rpx;
			box-sizing: border-box;
			margin-bottom: 80rpx;

			.recharge {
				position: absolute;
				right: 0;
				top: 20rpx;
				width: 120rpx;
				height: 68rpx;
				border-radius: 34rpx 0rpx 0rpx 34rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF !important;
			}

			.icons {
				position: relative;

				.txt {
					font-size: 30rpx;
					font-weight: 500;
					color: #FFFFFF;
				}

			}

			.num {
				font-size: 72rpx;
				font-weight: bold;
				color: #FFFFFF;
				font-family: DIN;
				text-align: center;
				margin-top: 40rpx;
			}

			.yuan {
				font-size: 26rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
			}

			.tixian {
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: right;
			}
		}
	}


	.record-list {
		.item {
			height: 156rpx;
			border-bottom: 1rpx solid #e8e8e8;
			padding: 13rpx 0;
			box-sizing: border-box;
			display: flex;

			.pic {
				width: 70rpx;
				display: flex;
				// justify-items: center;
				align-items: center;

				.type-pic {
					width: 45rpx;
					height: 54rpx;
					vertical-align: middle;
					margin: auto;
				}
			}

			.desc {
				width: 550rpx;
				padding-top: 13rpx;
				box-sizing: border-box;
				padding-left: 20rpx;

				.title {
					font-size: 30rpx;
					font-weight: 500;
					color: #111111;
				}

				.time {
					font-size: 28rpx;
					font-weight: bold;
					color: #666666;
					margin-top: 25rpx;
				}
			}

			.amount {
				flex: 1;
				text-align: right;

				.count {
					font-size: 32rpx;
					font-weight: bold;
					color: #111111;
				}

				.total {
					font-size: 28rpx;
					font-weight: bold;
					color: #666666;
					margin-top: 28rpx;
				}
			}
		}
	}

	.mask {
		position: fixed;
		height: 100%;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .6);

		.dialog {
			position: absolute;
			left: 50%;
			top: 40%;
			transform: translate(-50%, -50%);
			width: 620rpx;
			height: 460rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			text-align: center;
			box-sizing: border-box;
			padding: 28rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #222222;
			}

			.balance_tip {
				display: flex;
				justify-content: center;
				margin-top: 15rpx;

				.now_balance {
					font-size: 22rpx;
					color: #777777;
					margin-right: 30rpx;
				}

				.all_to_cash {
					font-size: 22rpx;
					color: #DA441B;
				}
			}

			.ipt {
				width: 483rpx;
				height: 2rpx;
				border-bottom: 2rpx solid #F2F2F2;
				margin: auto;
				margin-top: 100rpx;
			}

			.btns {
				display: flex;
				justify-content: space-between;
				margin-top: 65rpx;

				.cancle,
				.pay {
					width: 227rpx;
					height: 93rpx;
					border-radius: 8px;
					line-height: 93rpx;
					text-align: center;
				}

				.cancle {
					background: #EAEAEA;
					color: #999999;
				}

				.pay {
					background: linear-gradient(-42deg, #DA441B, #F56942);
					color: #fff;
				}
			}
		}
	}

	.need-level {
		position: absolute;
		left: 50%;
		top: 40%;
		transform: translate(-50%, -50%);
		width: 620rpx;
		height: 390rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		text-align: center;
		box-sizing: border-box;
		padding: 28rpx;

		.cant {
			font-size: 36rpx;
			font-weight: bold;
			height: 220rpx;
			line-height: 220rpx;
			color: #222222;
		}

		.sure-btn {
			width: 467rpx;
			height: 93rpx;
			line-height: 93rpx;
			text-align: center;
			margin: auto;
			background: linear-gradient(-42deg, #DA441B, #F56942);
			border-radius: 8rpx;
			font-size: 34rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>
